<!--
 * @Author: liyin 2179253556@qq.com
 * @Date: 2023-03-21 14:12:31
 * @LastEditors: liyin 2179253556@qq.com
 * @LastEditTime: 2023-03-22 09:34:41
 * @FilePath: \questionnaire-system-admin\src\components\Common\MainTwo.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="hl-main-box">
      <el-row class="main-row-flex" id="main-row-flex">
        <router-view v-slot="{ Component, route }">
          <transition name="fade" mode="out-in" appear>
            <keep-alive :include="includeList">
              <component :is="Component" :key="route.path"></component>
            </keep-alive>
          </transition>
        </router-view>
      </el-row>
    </div>
  </template>
  <script setup lang="ts">
  import BreadCrumb from './BreadCrumb.vue'
  import { ref, onMounted, watch } from 'vue'
  import { useRoute } from 'vue-router'
  import { PiniaStore } from '../../store'
  const route = useRoute()
  const store = PiniaStore()
  const mainRef = ref<any>(null)
  const includeList = ref<any>([])
  watch(
    () => route,
    (newVal: any, oldVal: any) => {
    },
    { deep: true }
  )
  onMounted(() => {
  })
  </script>
  <style lang="scss">
  .hl-main-box {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    color: #999;

    .main-row-flex {
      height: 100%;
      padding: 0px;
    }
  }
  </style>
  